<template>
  <view class="seek">
    <scroll-view scroll-y>
      <!-- 轮播图 -->
      <Swiper :list="BannerList" style="height: 340rpx" />
      <!-- 搜索 -->
      <view class="seek-search">
        <uni-search-bar
          clearButton="none"
          cancelButton="none"
          placeholder="搜索"
          bgColor="#e9e9e9"
          v-model="searchQuery"
          :radius="100"
          @input="onSearch"
        />
      </view>
      <!-- 用户列表 -->
      <template v-if="viewMode === 'avatar'">
        <userTwolist :userList="userList" :finish="finish" />
      </template>
      <template v-else-if="viewMode === 'list'">
        <UserList :userList="userList" :finish="finish" />
      </template>
      <template v-else>
        <UserBiglist :userList="userList" :finish="finish" />
      </template>
      <!-- 切换列表样式按钮 -->
      <div class="toggle-state">
        <view class="page">
          <view class="main-button" @click="toggleOverlay">
            <img
              :src="
                viewMode === 'avatar'
                  ? '../../../static/images/twostate.png'
                  : viewMode === 'list'
                  ? '../../../static/images/state.png'
                  : viewMode === 'grid'
                  ? '../../../static/images/bigstate.png'
                  : '../../../static/images/state.png'
              "
              alt=""
            />
            <text>
              {{
                viewMode === 'avatar'
                  ? '头像'
                  : viewMode === 'list'
                  ? '列表'
                  : viewMode === 'grid'
                  ? '大图'
                  : '列表'
              }}
            </text>
          </view>
          <view class="overlay" v-if="showOverlay" @click="toggleOverlay">
            <view class="overlay-content" @click.stop>
              <view class="toggle-button" @click="setViewMode('avatar')">
                <img
                  :src="
                    viewMode === 'avatar'
                      ? '../../../static/images/select-twostate.png'
                      : '../../../static/images/twostate-v.png'
                  "
                  alt=""
                />
                <text>头像</text>
              </view>
              <view class="toggle-button" @click="setViewMode('list')">
                <img
                  :src="
                    viewMode === 'list'
                      ? '../../../static/images/select-state.png'
                      : '../../../static/images/state-v.png'
                  "
                  alt=""
                />
                <text>列表</text>
              </view>
              <view class="toggle-button" @click="setViewMode('grid')">
                <img
                  :src="
                    viewMode === 'grid'
                      ? '../../../static/images/select-bigstate.png'
                      : '../../../static/images/bigstate-v.png'
                  "
                  alt=""
                />
                <text>大图</text>
              </view>
            </view>
          </view>
        </view>
      </div>
      <!-- 返回顶部 -->
      <BackTop :show="showBackToTop" />
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
import UserList from '@/components/seek/UserList/userlist.vue'
import UserTwolist from '@/components/seek/UserList/userTwolist.vue'
import UserBiglist from '@/components/seek/UserList/userBiglist.vue'
import BackTop from '@/components/seek/BackTop/backtop.vue'
import Swiper from '../components/Swiper.vue'
import type { BannerItem, UserItem } from '@/types/index/home'
import { getHomeBannerAPI, getUserItemAPI } from '@/services/index/home'
import type { PageResult, PageParams } from '@/types/index/gloabl'
import { onReachBottom } from '@dcloudio/uni-app'

const searchQuery = ref('') // 用于存储搜索查询

// 搜索处理函数
const onSearch = (event: string) => {
  searchQuery.value = event // 获取搜索框的值
  // 模糊搜索
  if (searchQuery.value === '') {
    getUserListData()
  } else {
    userList.value = userList.value.filter(
      (user) =>
        user.nickname.includes(searchQuery.value) || // 搜索用户昵称
        user.gender.includes(searchQuery.value) || // 搜索用户性别
        user.occupation.includes(searchQuery.value) || // 搜索用户职业
        user.education.includes(searchQuery.value) || // 搜索用户教育程度
        user.hobbies.includes(searchQuery.value) || // 搜索用户爱好
        user.self_introduction.includes(searchQuery.value) || // 搜索用户自我介绍
        user.ask.age_range.includes(searchQuery.value) || // 搜索用户希望的年龄范围
        user.ask.height_range.includes(searchQuery.value) || // 搜索用户希望的身高范围
        user.ask.desired_marital_status.includes(searchQuery.value) || // 搜索用户希望的婚姻状况
        user.ask.minimum_education.includes(searchQuery.value) || // 搜索用户希望的最低教育程度
        user.ask.desired_house_status.includes(searchQuery.value) || // 搜索用户希望的住房情况
        user.ask.other_requirements.includes(searchQuery.value), // 搜索用户其他要求
    )
  }

  console.log('搜索内容:', searchQuery.value) // 处理搜索逻辑
}

// 分页参数
const pageParams: Required<PageParams> = {
  page: 1,
  pageSize: 5,
}
const userList = ref<UserItem[]>([])
// 已结束标记
const finish = ref(false)

const getUserListData = async () => {
  let res = await getUserItemAPI()
  setTimeout(() => {
    let data = res.data.result
    finish.value = data.length === 0
    if (finish.value) {
      return uni.showToast({ icon: 'none', title: '没有更多数据~' })
    }
    userList.value.push(...data)
    pageParams.page++
  }, 1000)
  return res
}

// 触底加载
onReachBottom(() => {
  getUserListData()
})

onMounted(() => {
  Promise.all([getHomeBannerData(), getUserListData()])
})

const BannerList = ref<BannerItem[]>([])
const getHomeBannerData = async () => {
  const { data } = await getHomeBannerAPI()
  console.log(data)
  BannerList.value = data.result
}
const showBackToTop = ref(false)
// 滚动事件
onPageScroll((event) => {
  showBackToTop.value = event.scrollTop > 50
})
// 切换状态
const showOverlay = ref(false)
const viewMode = ref('list') // 默认视图模式

const toggleOverlay = () => {
  showOverlay.value = !showOverlay.value
}

const setViewMode = (mode: string) => {
  viewMode.value = mode
  toggleOverlay() // 选择模式后关闭遮罩层
}
</script>

<style lang="scss">
.seek {
  background-color: #f5f5f5;
  height: 100%;
}

// 切换状态
.page {
  position: relative;
}

.main-button {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  background-color: #00aabf;
  color: #ffffff;
  font-size: 24rpx;
  padding: 9rpx 22rpx;

  image {
    width: 25px;
    height: 25px;
  }
}

.overlay {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-content {
  position: fixed;
  right: 20px;
  bottom: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
}

.toggle-button {
  padding: 5px 11px;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  background-color: #ffffff;
  border-radius: 8px;
  color: #666666;
  font-size: 12px;
  transition: background-color 0.3s;
  image {
    width: 25px;
    height: 25px;
  }

  &.active {
    background-color: #00bfa5;
    color: #ffffff;
  }
}

.toggle-button:last-child {
  margin-bottom: 0;
}
</style>
